<template>
  <div class="search-container">
    <a-form
      :model="formData"
      :rules="rules"
      ref="formRef"
      layout="inline"
      @submit="handleSearch"
    >
      <a-form-item field="rangeValue" label="时间范围">
        <a-range-picker
          show-time
          :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          v-model="formData.rangeValue"
          :shortcuts="rangeShortcuts"
          shortcuts-position="left"
        />
      </a-form-item>
      <a-form-item field="account" label="账号">
        <a-input v-model="formData.userAccount" placeholder="账号" />
      </a-form-item>
      <a-form-item>
        <a-button html-type="submit" type="primary" :loading="searchLoading">
          搜索
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { ref, useTemplateRef } from 'vue'
import { getTodayRange } from '@/utils/dayUtils'
import { getUserMove } from '@/api/search'
import to from '@/utils/to'
const formData = ref({
  rangeValue: [],
  userAccount: '',
})
const rules = {
  rangeValue: [{ required: true, message: '请选择时间范围' }],
  userAccount: [{ required: true, message: '请输入账号' }],
}
const formRef = useTemplateRef('formRef')
const rangeShortcuts = ref([
  {
    label: '今日',
    value: () => getTodayRange(),
  },
])
const searchLoading = ref(false)
const tabelList = ref<MoveTrackTableRow[]>([])
const handleSearch = async () => {
  const errors = await formRef.value.validate()
  if (errors) return
  searchLoading.value = true
  const [start, end] = formData.value.rangeValue
  const { userAccount } = formData.value
  const [res] = await to(
    getUserMove({
      start,
      end,
      userAccount,
    })
  )
  if (res?.data) {
    tabelList.value = res.data.map((item) => {
      return {
        ...item,
        parseInfo: JSON.parse(item.info),
      }
    })
    console.log(tabelList.value)
  }
  searchLoading.value = false
}
</script>

<style scoped lang="scss">
.search-container {
  padding: 20px;
}
</style>
